<template>
  <div>
    <!-- <div v-show="false">{{totalPrice}}</div> -->
    <div class="lists" v-for="item in list" :key="item.item_id">
      <div class="list-img"><img :src="item.file_path"></div>
      <div class="list-main">
        <div class="title">{{item.title}}</div>
        <div class="stock"><span>￥{{item.price}}</span>库存：{{item.stock}}</div>
        <div class="content">{{item.fenxiao_slogan}}</div>
        <div class="content">可做{{item.num}}杯</div>
        <div class="content no-margin">{{item.num}}<span>/{{buyValue}}</span></div>
      </div>
      <div class="plug">
        <count-plug
          v-model="item.value"
          :minLimit='minLimit'
          :maxLimit='item.stock'
          :itemId="item.id"
          :disabled="true"
          :value='item.value'
          :dzClass="true"
          @changeNum="changeNum"
          >
        </count-plug>
      </div>
    </div>

  </div>
</template>
<script>
import countPlug from '@/components/CountPlug'
export default {
  components: {
    countPlug
  },
  props: {
    buyValue: {
      type: Number | String,
      default: 0
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      minLimit: 0
    }
  },
  created() {
    const buy = this.buyValue
    this.list.forEach(function(data) {
      data.value = Math.ceil(buy / data.num)
    })
    // console.log('list', this.list)
  },
  watch: {
    'buyValue'() {
      const buy = this.buyValue
      this.list.forEach(function(data) {
        data.value = Math.ceil(buy / data.num)
      })
      // console.log('list', this.list)
    }
  },
  methods: {
    changeNum(num, type, itemId) {
      this.$emit('changeNum', this.list)
    }
  }
}
</script>
<style lang="scss">
.lists {
  display: flex;
  position: relative;
  border-bottom: 1px solid #DEDEDE;
  padding: 32px 32px 22px 32px;
  &:last-child {
    border: none;
  }
  .plug {
    position: absolute;
    right: 32px;
    bottom: 26px;
  }
  .list-img {
    width: 220px;
    height: 220px;
    img {
      width: 220px;
      height: 220px;
      object-fit: cover;
    }
  }
  .list-main {
    margin-left: 24px;
    div {
      margin-bottom: 18px;
    }
    .title {
      font-size: 28px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:1;
      overflow: hidden;
    }
    .stock {
      font-size: 28px;
      color: #C9C9C9;
      span {
        color: #E84F39;
        margin-right: 16px;
      }
    }
    .content {
      color: #C9C9C9;
      font-size: 24px;
      span {
        color: #E84F39;
        margin-left: 8px;
      }
    }
  }
}
.no-margin {
  margin: 0
}
</style>